<template>
  <view class="coupon-card">
    <view class="coupon-tag">{{
      props.detail.type === 1 ? "百分比折扣券" : "满减券"
    }}</view>
    <view class="coupon-info">
      <view
        class="price-info"
        :class="[props.detail.useStatus !== 0 ? 'def-price-info' : '']"
      >
        <view class="price">
          <view class="leading-25px">{{ props.detail.maxOff }}</view>
        </view>
        <view
          class="whitespace-nowrap text-s text-primary"
          :class="[props.detail.useStatus !== 0 ? 'def-price-info' : '']"
        >
          {{
            props.detail.threshold !== 0
              ? `满${props.detail.threshold}可用`
              : "无门槛优惠券"
          }}</view
        >
      </view>
      <view class="flex flex-col flex-1">
        <view class="label text-base leading-none">{{
          props.detail.name
        }}</view>
        <view class="text-999 text-s leading-none">
          仅线上使用
          <view class="mt-s"
            >{{ props.detail.startTime.substring(0, 10) }} -
            {{ props.detail.endTime.substring(0, 10) }}
          </view>
        </view>
      </view>

      <view class="useIcon" v-if="props.detail.useStatus !== 0">
        <image
          :src="
            props.detail.useStatus === 1
              ? ossImg('personal/ysy_pic.png')
              : ossImg('personal/gq_pic.png')
          "
        >
        </image>
      </view>
    </view>
    <view class="coupon-controller">
      <view class="coupon-rule" @click="couponRule">
        使用说明
        <image
          :src="ossImg('others/component/down.png')"
          :style="{
            transform: `rotate(${isDescription === true ? '180deg' : '0deg'})`,
          }"
        />
      </view>
      <view class="controller">
        <!-- <button>转赠</button> -->
        <button
          v-if="props.detail.useStatus === 0"
          class="primary"
          @click="backMall"
        >
          立即使用
        </button>
      </view>
    </view>

    <view class="coupon-description" v-if="isDescription">
      使用说明：{{ props.detail.description }}
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ossImg } from "@/utils/utils";
import { defineProps, ref } from "vue";
const props = defineProps({
  detail: {
    type: Object,
  },
});
const isDescription = ref(false);

const backMall = () => {
  getApp().emdlz("track", "event", "store_page", "click", "use_coupon_now", "");

  if (props.detail.productIds.length === 1) {
    uni.navigateTo({
      url: `/pages/goods/goods?id=${props.detail.productIds[0]}`,
    });
  } else {
    uni.switchTab({
      url: "/pages/mall/mall",
    });
  }
};

const couponRule = () => {
  getApp().emdlz("track", "event", "store_page", "click", "coupon_rule", "");
  isDescription.value = !isDescription.value;
};
</script>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.coupon-card {
  position: relative;
  border-radius: 7px;

  .coupon-tag {
    width: 40px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    background: #0058c6;
    border-radius: 0 0 5px 5px;
    position: absolute;
    color: white;
    font-size: 11px;
    left: 15px;
    top: -4px;
    z-index: 10;
  }

  .coupon-info {
    display: flex;
    padding: 10px 0 16px 0;
    position: relative;
    background: white;
    border-bottom: 1px dashed #cad7ee;

    .price-info {
      width: 112px;
      margin: -10px 0 -18px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: @primary-color;

      .price {
        font-size: 32px;
        position: relative;
        margin-bottom: 10px;
        line-height: 1;
        display: flex;
        align-items: flex-end;
      }
    }

    .def-price-info {
      color: #999999 !important;
    }

    .label {
      line-height: 20px;
      height: 45px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .useIcon {
      width: 64px;
      height: 64px;
      padding: 0 10px;
      image {
        width: 100%;
        height: 100%;
      }
    }

    &::after,
    &::before {
      content: "";
      width: 6px;
      height: 12px;
      background-color: #f0f1f3;
      position: absolute;
      bottom: 0;
      transform: translate(0, 50%);
    }

    &::before {
      left: 0;
      border-radius: 0 12px 12px 0;
    }

    &::after {
      right: 0;
      border-radius: 12px 0 0 12px;
    }
  }

  .coupon-controller {
    display: flex;
    background: white;
    align-items: center;
    justify-content: space-between;
    height: 39px;
    padding: 0 20px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 0 10px spread rgba(0, 0, 0, 0.2);
    z-index: 99;

    .coupon-rule {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: @label-color;

      image {
        width: 7px;
        height: 4px;
        display: block;
        margin-left: 5px;
      }
    }

    .controller {
      display: flex;
      align-items: center;

      button {
        margin-left: 12px;
        width: 74px;
        height: 26px;
        line-height: 25px;
        background: #ffffff;
        border: 1px solid #8d94ae;
        border-radius: 13px;
        font-size: 12px;
        color: @primary-color;
        padding: 0;

        &.primary {
          color: white;
          background: @primary-color;
          border-color: @primary-color;
        }

        &::after {
          border: none;
        }
      }
    }
  }

  .coupon-description {
    margin-top: 1px;
    background: white;
    box-sizing: border-box;
    padding: 10px 20px;
    width: 100%;
    font-size: 12px;
    color: @label-color;
  }
}
</style>
